<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        // save 和 restore改变的值
        // strokeStyle, fillStyle, globalAlpha,
        // lineWidth, lineCap, lineJoin, miterLimit,
        // shadowOffsetX, shadowOffsetY, shadowBlur,
        // shadowColor, globalCompositeOperation

        ctx.fillRect(0, 0, 150, 150); // 使用默认设置绘制一个矩形
        ctx.save(); // 保存默认状态

        ctx.fillStyle = "red"; // 在原有配置基础上对颜色做改变
        ctx.fillRect(15, 15, 120, 120); // 使用新的设置绘制一个矩形

        ctx.save(); // 保存当前状态
        ctx.fillStyle = "#FFF"; // 再次改变颜色配置
        ctx.fillRect(30, 30, 90, 90); // 使用新的配置绘制一个矩形

        ctx.restore(); // 重新加载之前的颜色状态
        ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

        ctx.restore(); // 加载默认颜色配置
        ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
